<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="lib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>京西商城</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<body bgcolor="#F0F8FF">

<div class="page">
    <div>
        <br>
    </div>
    <ul id="jsddm">
        <li>
            <a href="index.jsp">首页</a>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
            <a>商品分类</a>
            <ul>
                <li><a href="../index/showGoodsByType?typeid=101">服饰</a></li>
                <li><a href="../index/showGoodsByType?typeid=102">食品</a></li>
                <li><a href="../index/showGoodsByType?typeid=103">书籍</a></li>
                <li><a href="../index/showGoodsByType?typeid=104">科技</a></li>
                <li><a href="showGoodsByType?typeid=105">日用</a></li>
            </ul>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="../user/showcar">我的购物车</a>

        </li>
        <li>
            <a href="../user/showorder">我的订单</a>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
            <a>个人中心</a>
            <ul>
                <li><a href="../user/cusindex.jsp">个人中心</a></li>
                <li><a href="../user/logout">退出登录</a></li>
            </ul>
        </li>
        <li>
            <form action="../index/searchgoods" method="post">
                <input type="text" name="find_goods" placeholder="请输入商品名"
                       style="width: 100px;height: 30px;border:1px solid #000000;">
                <input type="submit" name="submit" value="搜索" style="border:1px solid #000000;width: 40px;height: 25px">
            </form>
        </li>
    </ul>
    <script type="text/javascript">
        //显示子菜单
        function showSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

        //隐藏子菜单
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>

    <div class="content">
        <div class="zuo">

            <!---------------------------------------------------↓ 登录接口 ↓--------------------------------->

            <!--            <div class="lunhuan">-->
            <!--                <form action="" method="post">-->
            <!--                    <br><br>-->
            <!--                    <span class="name">&nbsp;账号:</span>-->
            <!--                    <input type="number" name="num" style="width: 130px;height: 20px;border:1px solid #000000;">-->
            <!--                    <br><br>-->
            <!--                    <span class="name">&nbsp;密码:</span>-->
            <!--                    <input type="password" name="password" style="width: 130px;height: 20px;border:1px solid #000000">-->
            <!--                    <br><br>&nbsp;&nbsp;&nbsp;-->
            <!--                    <button type="button" class="register_button" onclick="sign_in()">登录</button>&nbsp;-->
            <!--                    <button type="button" class="register_button" onclick="window.location.href='register.html'">注册</button>-->
            <!--                </form>-->
            <!--                <form action="" method="post">-->
            <!--                    <br><br>&nbsp;&nbsp;-->
            <!--                    <span class="name" name="cid">用户id：</span>-->
            <!--                    <br><br>&nbsp;&nbsp;-->
            <!--                    <span class="name" name="cname">用户名：</span>-->
            <!--                    <br><br>&nbsp;&nbsp;&nbsp;&nbsp;-->
            <!--                    <button type="button" class="register_button" onclick="window.location.href='login.html'">注销</button>-->
            <!--                </form>-->
            <!--            </div>-->

            <!---------------------------------------------------↑ 登录接口 ↑--------------------------------->


            <!---------------------------------------------------↓ 热销接口 ↓--------------------------------->
            <div class="fangshi">
                <h1>热销榜</h1>
                <br>&nbsp;
                <% int i = 1; %>
                <c:forEach items="${goodsList_sales}" var="vo">
                    <a href="../goods/byPage?gid=${vo.gid}">
                        <img src="images/1.<% out.print(i++);%>.jpg"> ${vo.gname}
                    </a><br><br>&nbsp;
                </c:forEach>
            </div>
            <!---------------------------------------------------↑ 热销接口 ↑--------------------------------->

            <br>

            <!---------------------------------------------------↓ 热搜接口 ↓--------------------------------->
            <div class="fangshi">
                <h1>热搜榜</h1>
                <br>&nbsp;
                <% i = 1; %>
                <c:forEach items="${goodsList_search}" var="vo">
                    <a href="../goods/byPage?gid=${vo.gid}">
                        <img src="images/1.<% out.print(i++);%>.jpg"> ${vo.gname}
                    </a><br><br>&nbsp;
                </c:forEach>
            </div>
            <!---------------------------------------------------↑ 热搜接口 ↑--------------------------------->

            <br>

            <!---------------------------------------------------↓ 猜你喜欢接口 ↓--------------------------------->
            <div class="fangshi">
                <h1>猜你喜欢</h1>
                <br>&nbsp;
                <% i = 1; %>
                <c:forEach items="${goodsList_clike}" var="vo">
                    <a href="../goods/byPage?gid=${vo.gid}">
                        <img src="images/1.<% out.print(i++);%>.jpg"> ${vo.gname}
                    </a><br><br>&nbsp;
                </c:forEach>
                <br><br>
            </div>
            <!---------------------------------------------------↑ 猜你喜欢接口 ↑--------------------------------->


            <br>
        </div>
        <div class="you">
            <div class="zhuanti">
                <script type="text/javascript" language="JavaScript">
                    var widths = 750;
                    var w = 2;
                    var widthss = widths + w;
                    var heights = 300;
                    var heightss = heightss + w;
                    var heightt = 20;
                    var counts = 3;

                    //<!---------------------------------------------------↓ 广告接口 ↓--------------------------------->
                    img1 = new Image();
                    img1.src = 'images/1.png';
                    url1 = new Image();
                    url1.src = '#';
                    img2 = new Image();
                    img2.src = 'images/2.png';
                    url2 = new Image();
                    url2.src = '#';
                    img3 = new Image();
                    img3.src = 'images/3.png';
                    url3 = new Image();
                    url3.src = '#';
                    //<!---------------------------------------------------↑ 广告接口 ↑--------------------------------->

                    var nn = 1; //当前所显示的滚动图
                    var key = 0;    //标识是否为第一次开始执行
                    var tt;    //标识作用

                    function change_img() {
                        if (key == 0) {
                            key = 1;
                        } //如果第一次执行KEY=1，表示已经执行过一次了。
                        else if (document.all)//document.all仅IE6/7认识，firefox不会执行此段内容
                        {
                            document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上
                            document.getElementById("pic").filters[0].Play(duration = 2);  //开始转换
                            document.getElementById("pic").filters[0].Transition = 23;//转换效果
                        }

                        eval('document.getElementById("pic").src=img' + nn + '.src');     //替换图片
                        eval('document.getElementById("url").href=url' + nn + '.src'); //替换URL
                        //替换ALT

                        for (var i = 1; i <= counts; i++) {
                            document.getElementById("xxjdjj" + i).className = 'axx';
                        }
                        document.getElementById("xxjdjj" + nn).className = 'bxx';  //将当前页面的ID设置为选中状态
                        nn++;
                        if (nn > counts) {
                            nn = 1;
                        }    //如果ID大于总图片数量。则从头开始循环
                        tt = setTimeout('change_img()', 4000);    //在4秒后重新执行change_img()方法.
                    }

                    function changeimg(n)//点击黑条上的链接执行的方法。
                    {
                        nn = n; //当前页面的ID等于传入的N值,
                        window.clearInterval(tt); //清除用于循环的TT
//重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
                        change_img();
                    }

                    //样式表
                    document.write('<style>');
                    document.write('.axx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;font-size:12px;}');
                    document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#666;');
                    document.write('line-height:12px;font:12px sans-serif;background-color:#eee;border:1px solid #666}');

                    document.write('.bxx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;}');
                    document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#111;');
                    document.write('line-height:12px;font:12px sans-serif;background-color:#fff;border:1px solid #111}');

                    document.write('</style>');
                    //内容部分
                    document.write('<div style="width:' + widthss + 'px;height:' + heights + 'px;');
                    document.write('overflow:hidden;text-overflow:clip;float:left;">');
                    document.write('<div><a id="url" target="_blank"><img id="pic" ');
                    document.write('style="border:0;');
                    document.write('FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)"');
                    document.write(' width=' + widths + ' height=' + heights + ' /></a></div>');
                    document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);');
                    document.write('width:100%-2px;text-align:right;');
                    document.write('top:-19px;position:relative;margin:-5px 9px 0 1px;height:22px;line-height:22px;');
                    document.write('z-index:4000;"><div style="height:22px;line-height:22px;padding:2px 0 0 0;">');
                    for (var i = 1; i < counts + 1; i++) {
                        document.write('<a href="javascript:changeimg(' + i + ');" id="xxjdjj' + i + '"');
                        document.write(' class="axx" target="_self">' + i + '</a>');
                    }
                    document.write('</div></div></div>');
                    change_img();
                </script>
            </div>
            <div class="clearit"></div>

            <!---------------------------------------------------↓ 首页随机接口 ↓--------------------------------->
            <!-------------for循环生成div i<=(list.size()+1)/2 ---------------->


            <% i = 2; %>
            <div class="zhuanti">
                <br>
                <c:forEach items="${goodsList_random}" var="vo">
                    <div class="zhuanti<%if(i==1) i=2;else if(i==2) i=1;out.print(i);%>">
                        <br>
                        <a href="../goods/byPage?gid=${vo.gid}">
                            <img src="../img/${vo.picture}" height="200" width="200"></a>
                        <a href="../goods/byPage?gid=${vo.gid}"><p class="goodsname">${vo.gname}</p></a>
                        <a href="../goods/byPage?gid=${vo.gid}"><p class="goodsprice">${vo.gprice}</p></a>
                        <br>
                    </div>
                    <%if (i == 2) out.print("<div class=\"clearit\"><br></div>"); %>
                </c:forEach>
                <div class="clearit"></div>
            </div>

            <!---------------------------------------------------↑ 首页随机商品接口 ↑--------------------------------->

            <div class="jieshaoB">
                <h1 style="color:#fff">更多商品</h1>
                <div id=roll style="border: none;margin-left: 3px;">
                    <div id=demo
                         style="width:740px;height:210px;overflow: hidden;background-size: 100% 100%;border: none">
                        <table style="border: none">
                            <tr style="border: none">
                                <td id=picture1 style="border: none">
                                    <table style="border: none">
                                        <tr style="border: none">
                                            <c:forEach items="${goodsList_random_scroll}" var="vo">
                                                <td style="border: none">
                                                    <div class="xiao-one" style="border: none">
                                                        <a href="../goods/byPage?gid=${vo.gid}">
                                                            <img src="../img/${vo.picture}" width="200px"
                                                                 height="200px"></a>
                                                    </div>
                                                </td>
                                            </c:forEach>
                                        </tr>
                                    </table>
                                </td>
                                <td id=picture2 style="border: none">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <script type=text/javascript>
                        var speed = 5;//控制数字快慢
                        picture2.innerHTML = picture1.innerHTML;

                        function Marquee() {
                            if (demo.scrollLeft >= picture1.scrollWidth) {
                                demo.scrollLeft = 0;
                            } else {
                                demo.scrollLeft++;
                            }
                        }

                        var MyMar = setInterval(Marquee, speed);
                        demo.onmouseover = function () {
                            clearInterval(MyMar);//鼠标移上时清除定时器达到滚动停止的目的
                        }
                        demo.onmouseout = function () {//鼠标移开时重设定时器
                            MyMar = setInterval(Marquee, speed);
                        }
                    </script>
                </div>
            </div>
        </div>

        <br>
        <div class="clearit"></div>
    </div>

</div>
</div>
<div>
    <p class="banquan">&nbsp;</p>
    <p class="banquan">版权所有：刘艺杰、安森泰、张恒超、卢晓丹、贾文婷 2021-现在</p>
    <a href="mailto:2629145453@qq.com"><p class="banquan">联系我们</p></a>
    <p class="banquan">&nbsp;</p>
</div>
<embed src="video/ge.mp3" autostart="true" loop="true" width="0" height="0">
</body>
</html>
